import React from 'react';
import {Icon, Modal, Message } from 'antd';
import { Link, Lifecycle } from 'react-router';
import LeftMenu from './components/menuBar/leftMenu';

export default React.createClass({

  contextTypes: {
    router: React.PropTypes.object
  },

  getInitialState() {
    return {
      visible: false
    }
  },

  logout() {
    this.setState({
      visible: true
    })
  },

  handleBack() {
    this.context.router.push('/');
  },

  handleOk() {
    Utils.sendAjax({
      url: '/user/logout',
      callback: (result)=> {
        if (result.code == 200) {
          localStorage.userName = '';
          localStorage.mobilePhone = '';
          this.handleBack();
        }
      }
    })
  },

  handleCancel() {
    this.setState({
      visible: false
    })
  },

  render() {
    return (
      <div>
        <div className="ant-layout-aside">
          <aside className="ant-layout-sider">
            <div className="ant-layout-logo">
              <i className="ant-layout-logo-img"></i>
            </div>
            <div className="left-menu">
              <LeftMenu />
            </div>
          </aside>
          <div className="ant-layout-main">
            <div className="ant-layout-header">
              <h2>房东管理系统</h2>
              <div className="sign-bar">
                <i className="sign-header"></i>
                <span className="sign-phone">{localStorage.userName}</span>
                <span className="sign-out" onClick={this.logout}>
                  <Icon type="poweroff"  className="dela"/>
                </span>
              </div>
            </div>
            <div className="ant-layout-content-tab" >
              {this.props.children|| <div>当前页不存在</div>}
            </div>
          </div>
        </div>
        <Modal title="退出" visible={this.state.visible} width={300}
               onOk={this.handleOk} onCancel={this.handleCancel}>
          <p>是否退出当前用户？</p>
        </Modal>
      </div>
    )
  }
})